<template>
	<view class="main">
		<!-- height 单元格高度  loading显示加载中(默认false) emptyText 空数据时显示的文本内容-->
		<view>
			<!-- <view style="display: flex; justify-content: flex-start; align-items: center;flex-wrap: wrap;">
		
				<eui-combox fieldName="value1" selectWidth="50px"  v-model="value1" valueColor="#666666" backgroundColor="#F8F8F8" :border="false" :candidates="['张三','李四','王五']" @selectChange="selectChange"></eui-combox>
				<eui-combox fieldName="value2"   v-model="value2"  :candidates="['张三','李四','王五']"  @selectChange="selectChange"></eui-combox>
				<eui-combox fieldName="value3" v-model="value3"  :candidates="['张三','李四','王五']"  @selectChange="selectChange"></eui-combox>
			</view> -->
		
            <eui-table :column="column" :listData="data" 
			 :loading="false">
		</eui-table>
        </view>
        <view style="margin-top: 20px;">
            <eui-section title="自定义表格单元格数据" type="line" padding>
                <eui-table :column="column2" :listData="data2" 
			 :loading="false">
			<!-- 具名作用域插槽 #后面写column里slot的值 -->
			<template #f="Props">
                <view style="display: flex;">
                    <eui-tag v-for="(item,index) in Props.item.f" :text="item" plain plainFill></eui-tag>
                </view>
			</template>
		</eui-table>
    </eui-section>

        
        </view>
		<view style="margin-top: 20px;">
            <eui-section title="没数据" type="line" padding>
                <eui-table :column="column2" :listData="[]" 
			 :loading="false" :showDefaultEmpty="false">
		</eui-table>
    </eui-section>

        
        </view>
	</view>
</template>

<script setup>
	const log = (item) => {
		console.log(item)
	}
	const selectChange = (args)=>{
		console.log('selectChange',args)
	}
	import {
		ref
	} from 'vue'

	const dataSelect = ref([{text:'张三',value:'1'},{text:'李四',value:'2'}])
	const localValue = ref('1')
	const value1 = ref('张三')
	const value2 = ref('李四')
	const value3 = ref('王五')
	// 表头配置参数
	const column = ref([{
			title: '招商状态', // th标题
			isFixed: true, // 是否固定
			key: 'a', // 对应字段，
			//width: 3, // 宽度 width * 100 rpx,
			//slot: 'a'

		},
		{
			title: '数量', // th标题
			isFixed: false, // 是否固定
			key: 'b', // 对应字段
			//slot: 'b' // 插槽名
		},
		{
			title: '数量占比', // th标题
			isFixed: false, // 是否固定
			key: 'c', // 对应字段
			//slot: 'c' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'd'
		},
		{
			title: '面积占比', // th标题
			isFixed: false, // 是否固定
			key: 'e'
		},

	])
    const column2 = ref([{
			title: '品牌', // th标题
			isFixed: true, // 是否固定
            align:'left',
			key: 'a', // 对应字段，
			width: 1.4, // 宽度 width * 100 rpx,
			//slot: 'a'

		},
		{
			title: '业态', // th标题
			isFixed: true, // 是否固定
            align:'left',
			key: 'b', // 对应字段
            width: 1.3, // 宽度 width * 100 rpx,
			fixedW:1.4   // width * 100 rpx
			//slot: 'b' // 插槽名
		},
		{
			title: '铺位', // th标题
			isFixed: false, // 是否固定
            align:'left',
			key: 'c', // 对应字段
            width: 1.3, // 宽度 width * 100 rpx,
			//slot: 'c' // 插槽名
		},
		{
			title: '楼层', // th标题
			isFixed: false, // 是否固定
            align:'left',
            width: 1.2, // 宽度 width * 100 rpx,
			key: 'd'
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
            align:'right',
            width: 1.6, // 宽度 width * 100 rpx,
			key: 'e'
		},
        {
			title: '跟进情况', // th标题
			isFixed: false, // 是否固定
            align:'left',
            width: 3, // 宽度 width * 100 rpx,
			key: 'f',
            slot: 'f'   //插槽名
		},
	])
	// 表身数据
	const data = ref([])
    const data2 = ref([])
	// 模拟请求数据
	setTimeout(() => {
		data.value = [{
				"a": "待招商",
				"b": "25",
				"c": "25%",
				"d": "2500",
				"e": "25%",
			},
			{
				"a": "待招商",
				"b": "25",
				"c": "25%",
				"d": "2500",
				"e": "25%",
			},
			{
			    "a": "待招商",
				"b": "25",
				"c": "25%",
				"d": "2500",
				"e": "25%",
			},
			{
				"a": "待招商",
				"b": "25",
				"c": "25%",
				"d": "2500",
				"e": "25%",
			},
			{
			    "a": "待招商",
				"b": "25",
				"c": "25%",
				"d": "2500",
				"e": "25%",
			}
		]
        data2.value = [{
				"a": "耐克",
				"b": "零售",
				"c": "A001",
				"d": "1F",
				"e": "1000",
                "f":['已看铺','已发图']
			},
			{
				"a": "耐克2",
				"b": "零售",
				"c": "A002",
				"d": "2F",
				"e": "2000",
                "f":['已看铺','已发图']
			},
			{
				"a": "耐克3",
				"b": "零售",
				"c": "A0031",
				"d": "3F",
				"e": "3000",
                "f":['已看铺','已发图']
			},
			{
				"a": "耐克4",
				"b": "零售",
				"c": "A004",
				"d": "4F",
				"e": "4000",
                "f":['已看铺','已发图']
			},
			{
				"a": "耐克5",
				"b": "零售",
				"c": "A005",
				"d": "5F",
				"e": "5000",
                "f":['已看铺','已发图']
			},
		]
	}, 500)
</script>
<style lang="scss">
@import '../../../../static/font/enjoyicon5.0/iconfont.css';
.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
</style>